<!-- // 点元素获取 -->
<template>
    <div>
        <el-card>
            <template #header>
                <span class="title-span">API基础信息</span>
            </template>
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIBaseData.name" />
                </el-form-item>
                <el-form-item label="描述：">
                    <el-input v-model="popShowData.APIBaseData.desc" type="textarea"/>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card style="margin-top: 10px;">
            <template #header>
                <span class="title-span">API状态</span>
            </template>
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIState.name" disabled/>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIState.type" disabled/>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card style="margin-top: 10px;">
            <template #header>
                <span class="title-span">API输入</span>
            </template>
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataOne.name" disabled/>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataOne.type" disabled/>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataOne.selectValue">
                        <el-option v-for="(item, index) in props.inputSelectNodeIds" :key="index" :label="item.data.label"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataTwo.name" disabled/>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataTwo.type" disabled/>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataTwo.selectValue" placeholder="请选择">
                        <el-option v-for="item in checkList" :key="item" :label="item" :value="item" />
                    </el-select>
                </el-form-item>
                <el-form-item label="结构名称：">
                    <el-input v-model="fpopShowData.APIInput.dataTwo.structureName" />
                </el-form-item>
            </el-form>
            <el-divider />
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="fpopShowData.APIInput.dataThree.name" disabled/>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="fpopShowData.APIInput.dataThree.type" disabled/>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="fpopShowData.APIInput.dataThree.selectValue" placeholder="请选择">
                        <el-option v-for="item in checkList" :key="item" :label="item" :value="item" />
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card style="margin-top: 10px;">
            <template #header>
                <span class="title-span">API输出</span>
            </template>
            <div v-for="(item, index) in APIOutput" :key="index">
                <el-form label-width="100">
                    <el-form-item label="名称：">
                        <el-input v-model="item.name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="类型：">
                        <el-input v-model="item.type" disabled></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, defineProps, onMounted, watch } from 'vue';
import flowNodesStore from '@/store/modules/flowNodes'
const { proxy } = getCurrentInstance();
const flowNodes = flowNodesStore()
const props = defineProps({
    // Define props here
    showFlowData: {
        type: Object,
    },
    drawer: {
        type: Boolean,
    },
    recapture: {
        type: Boolean
    },
    inputSelectNodeIds: {
        type: Array
    }
});


const popShowData = ref({
    APIBaseData: {
        name: '点元素获取',
        desc: '通过结构树或模型中的点元素',
    },
    APIState: {
        name: '成功',
        type: '布尔'
    },
    APIInput: {
        dataOne: {
            name: '点元素来源',
            type: '3D文档',
            selectValue: '',
        },
        dataTwo: {
            name: '从结构树获取',
            type: '枚举',
            selectValue: '',
            structureName: 'Hole'
        },
        dataThree: {
            name: '获取规则',
            type: '枚举',
            selectValue: '',
        }
    },
})

const node_data = computed(() => {
    let obj = {
        input3DData: props.showFlowData.id,
        // 系统属性（固定属性）
        systemAttributeList: popShowData.value.APIInput.dataTwo.checkList,
        // 计算属性
        customAttributeList: popShowData.value.APIInput.dataThree.zdyAttributeList,
        // 自定义属性
        calculateAttributeList: popShowData.value.APIInput.dataFour.checkList,
    }
    return obj;
});

const APIOutput = computed(() => {
    const allCheckLists = [];
    popShowData.value.APIInput.dataTwo.checkList.forEach((item) => {
        let obj = {
            name: item,
            type: '属性值'
        }
        allCheckLists.push(obj);
    });
    popShowData.value.APIInput.dataThree.zdyAttributeList.forEach((item) => {
        let obj = {
            name: item,
            type: '属性值'
        }
        allCheckLists.push(obj);
    });
    popShowData.value.APIInput.dataFour.checkList.forEach((item) => {
        let obj = {
            name: item,
            type: '属性值'
        }
        allCheckLists.push(obj);
    });
    return allCheckLists;
});


// watch(() => props.drawer, (val) => {
//     if (!val) {
//         setData();// 更新数据
//     }
// }, { deep: true }, { immediate: true })

watch(() => popShowData.value, (val) => {
  if (val) {
    setData();// 更新数据
  }
}, { deep: true }, { immediate: true })

watch(() => props.recapture, (val) => {
    reset();
    getList();
}, { deep: true }, { immediate: true })

watch(() => APIOutput.value, (val) => {
    popShowData.value.APIOutput = val
})
onMounted(() => {
    getList();
    setData();
})
const getList = () => {
    if (props.showFlowData.id) {
        if (flowNodes.getFlowNodesById(props.showFlowData.id)) {
            let nodeData = flowNodes.getFlowNodesById(props.showFlowData.id);
            if (nodeData.data.popShowData) {
                popShowData.value = JSON.parse(JSON.stringify(nodeData.data.popShowData))
            }
        }
    }
}
const setData = () => {
  let nodeData = flowNodes.getFlowNodesById(props.showFlowData.id);
  // 如果找到了该节点，则更新数据
  if (nodeData) {
    nodeData.data.popShowData = popShowData.value
    nodeData.data.data = node_data.value
    flowNodes.setFlowNodesById(props.showFlowData.id, nodeData)
  }
}
const reset = () => {
    popShowData.value = {
        APIBaseData: {
            name: '点元素获取',
            desc: '通过结构树或模型中的点元素',
        },
        APIState: {
            name: '成功',
            type: '布尔'
        },
        APIInput: {
            dataOne: {
                name: '点元素来源',
                type: '3D文档',
                selectValue: '',
            },
            dataTwo: {
                name: '从结构树获取',
                type: '枚举',
                selectValue: '',
                structureName: 'Hole'
            },
            dataThree: {
                name: '获取规则',
                type: '枚举',
                selectValue: '',
            }
        },
        APIOutput: [],
    }
}
</script>

<style scoped>
.checkbox-item-sty {
    display: block;
}

::v-deep .el-checkbox__label {
    font-size: 16px;
    /* 你可以根据需要调整字体大小 */
}

table {
    border-collapse: collapse;
    /* 合并边框 */
    width: 100%;
    /* 表格宽度 */
    margin-top: 10px;
}

th,
td {
    border: 1px solid #ccc;
    /* 边框 */
    padding: 8px;
    /* 内边距 */
    text-align: center;
    /* 文字居中 */
}

th {
    background-color: #f5f5f5;
    /* 表头背景色 */
    font-weight: 500;
    /* 表头字体粗细 */
}
</style>